<template>
  <div>
    <div class="licc-goods-sale-review-top">
      <el-form :model="filterGoodsList" ref="filterGoodsList"  label-width="80px">
        <el-row>
          <el-col :span="5">
            <el-form-item
              label="商品货号"
              prop="goodSn"
              :rules="[{trigger: 'blur', validator: validateGoodsSnRule}]">
              <el-input v-model="filterGoodsList.goodSn" placeholder="请输入商品货号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              label="商品名称"
              prop="goodsName"
              :rules="[{trigger: 'blur', validator: validateGoodsNameRule}]">
              <el-input v-model="filterGoodsList.goodsName" placeholder="商品名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label=添加时间>
              <el-date-picker
                v-model="datePickerValue"
                value-format="yyyy-MM-dd HH:mm:SS"
                :picker-options="pickerOptions"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="2">
            <el-button type="info" @click="restGoodsInfosButton">重 置</el-button>
            <el-button type="primary" @click="selectGoodsInfosButton">筛 选</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <div class="goods-table">
        <el-table
          stripe
          border
          :data="goods"
          :default-sort = "{prop: 'createDate', order: 'descending'}">
          <el-table-column prop="goodsSn" label="商品货号" width="180" sortable></el-table-column>
          <el-table-column prop="goodsName" label="商品名称" width="180"></el-table-column>
          <el-table-column prop="shopPrice" label="销售价" width="80"></el-table-column>
          <el-table-column prop="goodsNumber" label="库存" width="80"></el-table-column>
          <el-table-column prop="createDate" label="添加时间" width="160" sortable></el-table-column>
          <el-table-column prop="keywords" label="商品关键字" width="100"></el-table-column>
          <el-table-column prop="goodsUnit" label="单位" width="50"></el-table-column>
          <el-table-column prop="costPrice" label="成本价" width="80"></el-table-column>
          <el-table-column prop="goodsWeight" label="重量（kg）" width="100"></el-table-column>
          <el-table-column prop="goodsBrief" label="简短描述" width="120"></el-table-column>
          <el-table-column
            prop="reviewStatus"
            label="状态"
            width="100"
            :filters="reviewStatusFilters"
            :filter-method="reviewStatusfilterTag">
            <template slot-scope="scope">
              <el-tag :type="reviewStatusType(scope.row.reviewStatus)">
                {{reviewStatusShowText(scope.row.reviewStatus)}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" width="248" label="操作">
            <template slot-scope="scope">
              <el-button
                class="licc-goods-sale-review-operation"
                size="mini"
                type="primary"
                @click="handleSubmit(scope.$index, scope.row)">上市</el-button>
              <el-button
                class="licc-goods-sale-review-operation"
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">预览</el-button>
              <el-button
              size="mini"
              class="licc-goods-sale-review-operation"
              @click="stockEdit(scope.$index, scope.row)">库存</el-button>
              <el-button
                class="licc-goods-sale-review-operation"
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 35, 50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="goodsTotal">
        </el-pagination>
      </div>
    </div>
    <div>
      <el-dialog
        title="商品详情"
        :visible.sync="dialogGoodsInfoVisible"
        width="70%" style="text-align: left">
        <span>
          <goods-info v-if="dialogGoodsInfoVisible" :message="goodsInfoCheck"></goods-info>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogGoodsInfoVisible = false">返 回</el-button>
        </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="商品库存详情"
        :visible.sync="dialogGoodsProductVisible"
        width="70%" style="text-align: left">
        <span>
          <shop-products v-if="dialogGoodsProductVisible" :message="goodsProductCheck" @productInfoBackClick="dialogGoodsProductVisible = false"  @productInfoSubmit="productInfoSubmitClick"></shop-products>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import forSaleApi from '@/api/backstage/forSale'
  import goodsApi from '@/api/backstage/goods'
  import { getToken } from '@/utils/auth'
  import GoodsInfo from '../components/goodsInfo'
  import ShopProducts from '../components/shopProducts'
  export default {
    name: 'Goods_listInfo',
    components: {
      GoodsInfo,
      ShopProducts
    },
    data() {
      return {
        filterGoodsList:{
          goodSn:'',
          goodsName:''
        },
        datePickerValue:'',
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },
        goods:[],
        params2: {
          status: [70],
        },
        reviewStatusFilters:[
          {
            text:'待上市',
            value:70,
            type:''
          }
        ],
        currentPage: 1,
        pagesize:20,
        goodsTotal:0,
        /** 商品详情显示 **/
        dialogGoodsInfoVisible: false,
        goodsInfoCheck:{},
        /** 商品库存详情 **/
        dialogGoodsProductVisible: false,
        goodsProductCheck:{},
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData(){
        this.goods = [];
        this.goodsTotal = 0;
        goodsApi.getGoodsDataList(null, this.params2, this.currentPage, this.pagesize).then(res => {
          this.goods = res.data.records;
          this.goodsTotal = res.data.total;
        })
      },
      validateGoodsSnRule(rule, value, callback){
        if (typeof (value) == 'undefined'||value==null||value===''){
          callback()
        } else if (value.length < 3||value.length>20){
          callback(new Error('只能由3-20位字符组成'));
        } else {
          callback();
        }
      },
      validateGoodsNameRule(rule, value, callback){
        if (typeof (value) == 'undefined'||value==null||value===''){
          callback()
        } else if (value.length < 3||value.length>50){
          callback(new Error('只能由3-50位字符组成'));
        } else {
          callback();
        }
      },
      reviewStatusfilterTag(value, row){
        /** 状态列的筛选 需要filters filter-method属性**/
        return value === row.reviewStatus;
      },
      reviewStatusShowText(value){
        /** 拿到该行的值，然后遍历reviewStatusFilters拿到对应标签的名称 **/
        for (let i = 0; i < this.reviewStatusFilters.length; i++){
          if (value === this.reviewStatusFilters[i].value){
            return this.reviewStatusFilters[i].text;
          }
        }
        return value;
      },
      reviewStatusType(value){
        /** 拿到该行的值，然后遍历reviewStatusFilters拿到对应标签的样式 **/
        for (let i = 0; i < this.reviewStatusFilters.length; i++){
          if (value === this.reviewStatusFilters[i].value){
            return this.reviewStatusFilters[i].type;
          }
        }
        return "";
      },
      /** 分页---开始 **/
      handleSizeChange(val) {
        this.pagesize = val;
        this.initData();
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.initData();
        console.log(`当前页: ${val}`);
      },
      /** 分页---结束 **/
      /** 筛选重置 **/
      restGoodsInfosButton(){
        this.datePickerValue = null;
        this.filterGoodsList.goodSn = '';
        this.filterGoodsList.goodsName = '';
        this.$nextTick(() => this.$refs['filterGoodsList'].clearValidate())
        this.currentPage = 1;
        this.params2 = {
          status: [70],
        }
        this.initData();
      },
      /** 筛选事件 **/
      selectGoodsInfosButton(){
        this.params2 = {
          status: [70],
        }
        this.$refs['filterGoodsList'].validate(valid => {
          if (valid){
            this.params2 = {
              status: [70],
              goodsSn: this.filterGoodsList.goodSn,
              goodsName: this.filterGoodsList.goodsName,
              warnNumber: this.filterGoodsList.warnNumber,
            }
            if (this.datePickerValue!=null&&this.datePickerValue.length==2){
              this.params2.startTime = this.datePickerValue[0];
              this.params2.endTime = this.datePickerValue[1];
            }
            this.currentPage = 1;
            this.initData();
          } else {
            this.$notify({title: '提示', message: '输入的信息不合规', type: 'warning'});
          }
        });
      },
      /** 操作---开始 **/
      handleSubmit(index,row){
        /** 用户提交按钮 **/
        if (row.reviewStatus === 70){
          /** 待上市状态---开始 **/
          /** 提交提示 **/
          this.$confirm('该操作将会将商品上市，是否继续？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            /** 确定 商品上市操作开始 **/
            let params = {
              id: row.id,
              reviewStatus: 10
            }
            forSaleApi.updateGoods(params).then(res => {
              this.$notify.success({title: '成功', message: '商品上市成功！'});
              this.initData();
            }).catch(() => {
              this.$notify.error({title: '失败', message: '商品上市操作失败，请稍后再试！'});
            })
            /** 商品上市操作结束 **/
          }).catch(() => {
            /** 取消提交 **/
            this.$notify.info({title: '提示', message: '已取消提商品上市操作'});
          });
          /** 待上市状态---结束 **/
        } else {
          this.$notify.warning({title: '警告', message: '该状态不能提交'});
        }
      },
      handleEdit(index,row){
      /** 详情按钮 **/
        this.goodsInfoCheck = row;
        this.dialogGoodsInfoVisible = true;
      },
      stockEdit(index,row){
        /** 库存按钮 **/
        this.goodsProductCheck = row;
        this.dialogGoodsProductVisible = true;
      },
      /** 库存修改成功后 **/
      productInfoSubmitClick(){
        this.initData();
        this.dialogGoodsProductVisible = false;
      },
      handleDelete(index,row){
        /** 删除按钮 **/
        this.$confirm('永久删除该商品信息， 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          forSaleApi.deleteGoodsById(row.id).then(res =>{
            /** 重新请求该页数据 **/
            this.initData()
            this.$notify.success({title: '成功', message: '商品删除成功！'});
          }).catch(()=>{
            this.$notify.error({title: '失败', message: '商品删除失败，请稍后再试'});
          })
        }).catch(() => {
          this.$notify.info({title: '提示', message: '已取消删除商品操作'});
        });
      },
      /** 操作--结束 **/
    }
  }
</script>
<style>
  .licc-goods-sale-review-top{
    width: 100%;
    min-width: 1100px;
  }
  .licc-goods-sale-review-operation{
    padding: 5px 10px;
  }
</style>
